<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <link rel="icon" href="../img/favicon.gif" type="image/gif" />
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/main.css">
    <script>
    function init(){
        let nodes=document.querySelectorAll(".leftMenuImgs");
        Array.from(nodes).forEach((item)=>{
            item.addEventListener("click",(event)=>{
                let node=event.target.parentNode.nextElementSibling;
                if(node.hidden==true){
                    node.hidden=false;
                    item.classList.add("change");
                }else{
                    node.hidden=true;
                    item.classList.remove("change");
                }
            },false);
        });
    }
    window.addEventListener("load",init,false);
    </script>
</head>

<body>
    <main>
        <header class="head">logo</header>
        <nav class="topMenu">
            <ul class="topMenu_ul">
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_first"></div>
                        <a class="a_menuClass" href="#">显示首页</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_article"></div>
                        <a id="a_insertArticle" class="a_menuClass" href="#">写文章</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs"  id="tomMenu_img_articleType"></div>
                        <a class="a_menuClass" href="#">文章类型</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs"  id="tomMenu_img_config"></div>
                        <a class="a_menuClass" href="#">用户设置</a>
                    </nav>
                </li>
            </ul>
        </nav>
        <nav class="leftSide">
            <h2 style="text-align: center">文章类型</h2>
            <ul class="leftMenu_ul_level1">
                <li class="leftMenu_li_level1">
                    Java Core
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">面向对象</li>
                    <li class="leftMenu_li_level2">多线程</li>
                </ul>
                <li class="leftMenu_li_level1">Java Web
                        <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                        <li class="leftMenu_li_level2">Servlet3+</li>
                        <li class="leftMenu_li_level2">JSTL/EL</li>
                    </ul>
                <li class="leftMenu_li_level1">前端技术
                        <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                        <li class="leftMenu_li_level2">HTML5</li>
                        <li class="leftMenu_li_level2">CSS3</li>
                        <li class="leftMenu_li_level2">ECMAScript 6</li>
                    </ul>
                <li class="leftMenu_li_level1">心灵鸡汤
                        <div class="leftMenuImgs">
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                        <li class="leftMenu_li_level2">心情故事</li>
                    </ul>
            </ul>
        </nav>
        <section class="main">main page</section>
        <nav class="rightSide">right menu</nav>
        <footer class="foot">info</footer>
    </main>
</body>

</html>